import * as PIXI from 'pixi.js'
import { createSprite } from '@/utils/bundle'
import { diyElementClick } from '@/utils/events'
import { setPixi, setPixiData } from '@/store/modules/usePixiStore'
import { ELEMENT } from '@/config'
import param, { leftHeightUsage, leftWidthUsage, setElementKey } from '../param'
import useDiyStore from '@/store/modules/useDiyStore'

export default async () => {
  const diyStore = useDiyStore()
  const elementContainer = new PIXI.Container()
  await Promise.all(
    Object.entries(ELEMENT).map(async ([key, value], index) => {
      const container = new PIXI.Container()
      const unselection = await createSprite('unselectionType')
      const selection = await createSprite('selectionType')
      container.addChild(unselection)
      container.addChild(selection)
      selection.visible = diyStore.creationData.element === key
      const text = new PIXI.Text({
        text: key,
        style: {
          fontFamily: 'XQFont',
          fontSize: param.value.fontSize,
          fill: param.value.fill,
          align: 'center',
        },
      })
      text.anchor.set(0.5)
      text.position.set(container.width / 2 + 20, container.height / 2 - 3)
      container.addChild(text)
      container.position.set(index * container.width * 1.1, 0)
      setPixi(container.uid, container)
      setPixiData(container.uid, {
        key,
        value,
      })
      diyElementClick.whiteAdd(container)
      setElementKey(key, container)
      elementContainer.addChild(container)
    }),
  )
  elementContainer.position.set(0, param.value.startHeight + param.value.leftUsageHeight)
  leftWidthUsage(elementContainer)
  leftHeightUsage(elementContainer)
  return elementContainer
}
